<template>
  <div class="identity-select-container">
    <h2 class="title">请选择你的身份</h2>
    <div class="card-container">
      <div class="identity-card" @click="selectIdentity('chef')">
        <img src="https://cdn-icons-png.flaticon.com/512/3075/3075977.png" alt="厨师" class="avatar" />
        <p class="label">我是大厨<br />老子的锅呢</p>
      </div>

      <div class="identity-card" @click="selectIdentity('customer')">
        <img src="https://cdn-icons-png.flaticon.com/512/1995/1995574.png" alt="顾客" class="avatar" />
        <p class="label">我是顾客<br />我要点菜菜</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IdentitySelect',
  methods: {
    selectIdentity(identity) {
      console.log('选择身份：', identity)
      if (identity === 'chef') {
        this.$router.push('/chicken/manage/meal')
      } else if (identity === 'customer') {
        this.$router.push('/chicken/order')
      }
    }
  }
}
</script>

<style scoped>
.identity-select-container {
  max-width: 600px;
  margin: 200px auto;
  text-align: center;
}

.title {
  font-size: 24px;
  margin-bottom: 30px;
}

.card-container {
  display: flex;
  justify-content: space-around;
  gap: 100px;
  padding-top: 30px;
}

.identity-card {
  width: 220px;
  height: 250px;
  border: 2px solid #dcdfe6;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s;
  background-color: #f9f9f9;
}

.identity-card:hover {
  border-color: #409EFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.avatar {
  width: 100px;
  height: 100px;
  margin-bottom: 16px;
  padding-top: 30px;
}

.label {
  font-size: 16px;
  color: #333;
  line-height: 1.5;
}
</style>